{% extends "dappx/base.html" %}
{% block body_block %}

{% if share %}

<div class="modal fade" id="sharePopModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Open Sharing Log</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
	      You are viewing the log file shared from <span class="table-title" >{{ sharefrom }}<span>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <!-- <button type="button" class="btn btn-primary">Save changes</button> -->
      </div>
    </div>
  </div>
</div>

{% endif %}


<div class="container-fluid">
      <div class="row flex-xl-nowrap">
        <div class="col-12 col-md-2 col-sm-2 col-xs-2" style="max-width:18%">

     <nav class="navbar navbar-left" id="bd-docs-nav">
	<div class="list-group">
		<button  style="text-align: center;" class="list-group-item list-group-item-action active" >
		    <strong>Analysis Result</strong>
		</button>
		<button class="nav-btn list-group-item list-group-item-action" onclick="createTab('id0', 'Analysis Report', '/fetch_knownissue/{{ log_id }}', false)" >
			<img src="/static/img/remove-bg-icons/report.svg" class="col-nav-img" alt="High Memory Detection" > 
			<span class="text-info nav-text">Report</span>

		</button>
		<button class="nav-btn list-group-item list-group-item-action" onclick="createTab('id0', 'Summary', '/fetch_summary/{{ log_id }}', false)" >
			<img src="/static/img/remove-bg-icons/information.svg" class="col-nav-img" alt="Summary" > 
			<span class="text-info nav-text">Basie Info</span>
		</button>

		<div class="btn-group dropright">
		<button class="nav-btn list-group-item list-group-item-action dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			<img src="/static/img/remove-bg-icons/troubleshooting.svg" class="col-nav-img" alt="TroubleShoot"> 
			<span class="text-info nav-text">TroubleShoot</span>
		</button>
		<div class="dropdown-menu dropright-menu-custom">

		<button class="nav-btn-dropdown list-group-item list-group-item-action" onclick="createTab('id0', 'High memory detection', '/fetch_memory/{{ log_id }}', false)">
			<img src="/static/img/remove-bg-icons/memory.svg" class="col-nav-img-dropdown" alt="High Memory Detection"> 
			<span class="text-info nav-dropdown-text">High Memory Detection</span>
		</button>
		<button class="nav-btn-dropdown list-group-item list-group-item-action" onclick="createTab('id0', 'Configuration Compare', '/fetch_propdiff/{{ log_id }}', false)">
			<img src="/static/img/remove-bg-icons/configure.svg" class="col-nav-img-dropdown" alt="High Memory Detection" > 
			<span class="text-info nav-dropdown-text">Configuration Compare</span>
		</button>
                </div>

		</div>



		<!-- <button class="list-group-item list-group-item-action" >Polling Analysis -->
		<!-- </button> -->
		<!-- <button class="list-group-item list-group-item-action" >File Download -->
		<!-- </button> -->
	</div>
      </nav>


</div>

        

<main class="col-12 col-md-10 col-sm-10  col-xs-10 py-md-4  bd-content" role="main">
  	<ul class="nav nav-header-tabs" id="tab-center">
  	</ul>
  	
	<hr>
  	<div class="card mb-10" style="width: 80vw; height:70vh;">
  	  <div class="card-body-tab-content" >
	    <div id="myTabContent" class="tab-content">
  	    </div>
  	  </div>
  	</div>

</main>

      </div>
    </div>

{% endblock %}


{% block script %}

{% load static %}
<script src="{% static "js/echarts.js" %}"></script>

<script>

$(document).ready(function(){

// $('#myModal').modal('show')
$("#sharePopModal").modal('show')

 // create Home tab
createTab('id0', 'Analysis Report', '/fetch_knownissue/{{ log_id }}', false);

$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
   $("a.nav-link.active").removeClass("active");
   $("li.tab-header-active").removeClass("tab-header-active")
   $(e.target).closest('li').addClass('tab-header-active');
   var selector=$(e.target).attr('href');
   var myChart=$(selector).children("[id^=main-chart]")
   if (myChart.length > 0)
   {
           myChart.resize();
   }

})

})


function debouncer( func , timeout ) {
   var timeoutID , timeout = timeout || 200;
   return function () {
      var scope = this , args = arguments;
      clearTimeout( timeoutID );
      timeoutID = setTimeout( function () {
          func.apply( scope , Array.prototype.slice.call( args ) );
      } , timeout );
   }
}

function chartReDraw(){
  $("[id^=main-chart]").each(function(index){
  if ($(this).closest("[id^=tab--table]") && $(this).closest("[id^=tab--table]").hasClass("active") ){
    console.log("Window resizing.")
    myChart= echarts.init(this)
    myChart.resize()
  }
  })
}

<!-- function resNav(){ -->
<!--   <!-1- // width = Math.max( document.documentElement.clientWidth, window.innerWidth || 0) -1-> -->
<!--   width = $("div.list-group")[0].offsetWidth -->
<!--   <!-1- console.log(width); -1-> -->
<!--   wt=170 -->
<!--   if (width<wt){ -->
<!--     // console.log("Show Part.") -->
<!--   } else { -->
<!--     // console.log("Show All") -->
<!--   } -->
<!-- } -->

window.onresize = debouncer(function(){
	// change navigation list 
	// resNav()
	// redraw the chart
	 chartReDraw()
       }
)

function createTab(id, header, target, deleteBtn=true){

  if (id=="id0"){
    // console.log("trigger Delete")
    deleteTab(id);
  }
  selector = "#"+id;
  if ($(selector).length < 1) {
	  if (deleteBtn){
		  tabHeaderHtml= "<li class=\"tab-header-item\">" +"<button " +  "onclick=\"deleteTab('"+ id +"')\" " + " type=\"button\" class=\"tab-close\" data-dismiss=\"toast\" aria-label=\"Close\"><span class=\"text-danger\" aria-hidden=\"true\"><i class=\"fa fa-minus-square \" style=\"font-size:12px\"></i></span></button>"+ " <a class=\"nav-link\" data-toggle=\"tab\" href=\"#" + id + "\"><span class=\"nav-header-text\">" +header + "</span>"+"</a></li>" 
	  } else {
		  tabHeaderHtml= "<li class=\"tab-header-item tab-header-main\"> <a class=\"nav-link \" data-toggle=\"tab\" href=\"#" + id + "\"><span class=\"nav-header-text\">" + header + "</span></a></li>" 
	  }
	  if(id=="id0"){
	      $('#tab-center').prepend(tabHeaderHtml);
	  } else {
	      $('#tab-center').append(tabHeaderHtml);
	  }

      $.get(target, function(data, status){
         $('#myTabContent').append(data);
      })

    }; 
    switchTab(id);
};

function switchTab(id){
    // Assert the tab exists.
    selector = "#"+id;
	// console.log("switch->"+id)
    // Remove active attributes for current tab
    $("a.nav-link.active").removeClass("active");
    $("li.tab-header-active").removeClass("tab-header-active")
    $("#tab-center li a").each(
        function() {
            if (this.attributes.href.nodeValue == selector) {
                // Add "active" class for the tab.
                $(this).addClass("active");
		// Change tab color
		$(this).parent().addClass("tab-header-active");
               }
            }
     )
     // Switch tab content.
     $("#myTabContent div.tab-pane-global.active.show").removeClass("active show");
     $(selector).addClass("active show");
};



function getActiveId(){
  return $('#myTabContent div.tab-pane-global.active.show').attr('id')
}

function deleteTab(id) {
    // console.log(id)

    selector = "#"+id;
    activeId = getActiveId();

    if (activeId == id) {
	// console.log("active id")
      allIds = getAllIds();
      nextId = getNextTabId(allIds, id);
      // console.log("nextid:"+nextId)
      switchTab(nextId);
      removeOneTab(id);
    } else {
       // console.log("inactive id")
       removeOneTab(id);		
    }
};

function removeOneTab(id){
    selector = "#"+id;
    $("#tab-center li a").each(function() {
        if (this.attributes.href.nodeValue == selector) {
            $($(this)[0].parentNode).remove();
        };
    })
    $(selector).remove();
};

function getAllIds(){
    var array = new Array();
    $('#myTabContent div.tab-pane-global').each(function(){
        array.push($(this).attr('id')); 
    });
    return array
};

// follow the usage of tab like in browser.
function getNextTabId(array, id){
    currIndex = array.indexOf(id);
    var nextIndex;
    if (currIndex < array.length -1){
       nextIndex= currIndex + 1 
    } else {
       nextIndex= currIndex - 1 
    }
    return array[nextIndex]
};
</script>

{% endblock %}

